import './Scss/FilingCabinet.scss'
import { useRequest, useBoolean } from 'ahooks'
import { useState, useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { Result, message, Skeleton } from 'antd'
import { ICON } from '../../../../Common/Configure/Icon'
import { ModalBox } from '../../../../Common/Modal/ModalBox'
import { FrontModalBox, GetAttData } from '../Modal'

export const FilingCabinet001 = ({ title, infoTypeManageUuid }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const { runAsync } = useRequest(Http, { manual: true })

    const [Total, setTotal] = useState(0)
    const [List, setList] = useState([])

    const [ListState, { setTrue: ListStateTrue, setFalse: ListStateFalse }] = useBoolean(false)
    const [ViewState, { setTrue: ViewStateTrue, setFalse: ViewStateFalse }] = useBoolean(false)
    const [AttList, setAttList] = useState()

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [ParameterTitle, setParameterTitle] = useState()
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        runAsync({ url: 'getConstructionInfoManageStat', data: { infoTypeManageUuid } }).then(res => {
            const { total, list } = res
            setTotal(total)
            setList(list)
        })
    }, [infoTypeManageUuid, runAsync])

    const { run: getConstructionInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            console.log(list)
            if (list.length === 0) {
                messageApi.info('没有附件信息!')
            } else if (list.length === 1) {
                const [data] = list
                setAttList(data)
                ViewStateTrue()
            } else {
                setAttList(list)
                ListStateTrue()
            }
        },
    })

    return (
        <div className="FilingCabinet001">
            {contextHolder}
            <div className="TitleSmall">
                <div> {title}</div>
                <div />
            </div>
            {Total === 0 ? (
                <Result title="暂无数据" />
            ) : (
                <div className="Box">
                    <div className="list">
                        {List.map(item => (
                            <div
                                key={item.uuid}
                                onClick={() => {
                                    getConstructionInfoManageDetail({
                                        url: 'getConstructionInfoManageDetail',
                                        data: { InfoManageUuid: item.uuid },
                                    })
                                }}
                            >
                                {ICON['wenjianjia']}
                                <div>
                                    <div>
                                        <span>{item.tableName}</span>
                                    </div>
                                    <div>{item.eventDate}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="btn">
                        <div
                            onClick={() => {
                                setParameterTitle(title)
                                setParameter({
                                    uuid: infoTypeManageUuid,
                                    type: 'LargeScreeTable',
                                    classification: 'securitySlopeLeft',
                                })
                                setTrue()
                            }}
                        >
                            查看更多
                        </div>
                    </div>
                </div>
            )}
            {/* {ListState && AttList && <AttachmentList data={AttList} className="ItemTitle" Off={ListStateFalse} />}
            {ViewState && AttList && <AttachmentDetail data={AttList} className="ItemTitle" Off={ViewStateFalse} />} */}
        </div>
    )
}

export const FilingCabinet002 = ({ InfoTypeManageUuid }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const [OptionsCall, setOptionsCall] = useState()
    const [FrontOptionsCall, setFrontOptionsCall] = useState()
    const [Data, setData] = useState([])
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setData(res.list)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getConstructionInfoManageStat', data: { InfoTypeManageUuid, OEventDate: 'desc@1' } })
    }, [runAsync, InfoTypeManageUuid])

    return (
        <div className="FilingCabinet002">
            {contextHolder}
            {Data.length === 0 ? (
                <Result title="暂无数据" />
            ) : (
                <div className="box">
                    <div className="list">
                        {Data.map(({ uuid, tableName, eventDate }) => (
                            <div
                                className="Items"
                                key={uuid}
                                onClick={async () => {
                                    const data = await GetAttData(uuid)
                                    if (data) setOptionsCall(data)
                                    else messageApi.info('没有附件')
                                }}
                            >
                                {ICON['PDF']}
                                <div>{tableName}</div>
                                <div>{eventDate}</div>
                            </div>
                        ))}
                    </div>
                    <div
                        className="more"
                        onClick={() => {
                            setFrontOptionsCall({
                                type: 'TableList',
                                data: {
                                    title: '文件柜列表',
                                    type: 'securitySlopeLeft',
                                    uuid: InfoTypeManageUuid,
                                },
                            })
                        }}
                    >
                        <div>查看更多</div>
                    </div>
                </div>
            )}
            <ModalBox OptionsCall={OptionsCall} />
            <FrontModalBox OptionsCall={FrontOptionsCall} />
        </div>
    )
}

export const FilingCabinet003 = ({ infoTypeManageUuid, Number }) => {
    const [Status, { setFalse }] = useBoolean(true)
    const [MenuList, setMenuList] = useState()

    const [FrontOptionsCall, setFrontOptionsCall] = useState()

    const { runAsync: getTree } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [{ children }] = res
            setMenuList(children)
            setFalse()
        },
    })

    useEffect(() => {
        if (infoTypeManageUuid) getTree({ url: 'getInfoTypeManage', path: [`?ParentUuid=${infoTypeManageUuid}`] })
    }, [infoTypeManageUuid, getTree])

    const OpenFile = async (e, uuid, children) => {
        e.stopPropagation()
        if (!children) {
            setFrontOptionsCall({
                type: 'TableList',
                data: {
                    title: '文件柜列表',
                    type: 'securitySlopeLeft',
                    uuid,
                },
            })
        }
    }

    return (
        <div className="FilingCabinet003">
            <Skeleton loading={Status} active={true} paragraph={{ rows: 16 }}>
                <div className="Box">
                    {MenuList && MenuList.length !== 0 ? (
                        MenuList.map(({ uuid, tableName, children }) => (
                            <div className="ListOne" key={uuid}>
                                {ICON['wenjianjia']}
                                <div className="title" onClick={e => OpenFile(e, uuid, children)}>
                                    <div> {tableName} </div>
                                    <div> {Number && Number[uuid]} </div>
                                </div>
                                {children &&
                                    children.length !== 0 &&
                                    children.map(({ uuid, tableName, children }) => (
                                        <div className="ListTwo" key={uuid} onClick={e => OpenFile(e, uuid, children)}>
                                            <div> {tableName} </div>
                                            <div> {Number && Number[uuid]} </div>
                                        </div>
                                    ))}
                            </div>
                        ))
                    ) : (
                        <Result title="暂无数据" />
                    )}
                </div>
            </Skeleton>
            <FrontModalBox OptionsCall={FrontOptionsCall} />
        </div>
    )
}
